<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 300px;
        margin: 30px auto;
        border: 3px solid blue;
    }
    header{
        text-align: center;
        font-size: 20px;
        margin-top: 20px;
    }
    p{
        text-align: center;
        font-size: 12px;
        line-height: 40px;
    }
    form input{
        height: 30px;
        margin: 10px 20px;
        width: 255px;
        padding-left: 5px;
    }
    form input[type=submit]{
        width: 107px;
        height: 50px;
        margin: 10px 20px;
        border: none;
    }
    .yi{
        background: red;
        color: #fff;
    }
    .er{
        background: green;
        color: #fff;
    }
</style>
<body>
    <div class="box">
         <header>用户注册</header>
        <p>对新增元素，新增属性的测试案例</p>
        <form action="">
            <input type="text" placeholder="请输入用户名">
            <br>
            <input type="password" placeholder="请输入您的密码" class="mi1">
            <br>
            <input type="password" placeholder="请输入您的确认密码" class="mi2">
            <br>
            <input type="email" placeholder="请输入您的常用邮箱地址" name="email">
            <br>
            <input type="date">
            <input type="submit" value="验证提交" class="yi">
            <input type="submit" value="无验证提交" class="er">
        </form>
        <p>已有账号<a href="##">登录</a></p>
    </div>
   
    
</body>
<script src="jquery-2.2.0.min.js"></script>
<script>
    $('.yi').click(function(){
        if( $('.mi1').val()===$('.mi2').val()){
            $('.mi2').css({'background':'green'})
        }
        else{
            $('.mi2').css({'background':'red'})
        }

        var obj={
            userName:$('form input').eq(0).val(),
            userPassword:$('form input').eq(2).val(),
            userEmail:$('form input').eq(3).val()
        }

        localStorage.setItem("用户",obj.userName)
        localStorage.setItem("密码",obj.userPassword)
        localStorage.setItem("邮箱地址",obj.userEmail)
        return $('.mi2').css('background')

    })

    console.log(localStorage.getItem("用户"))
	console.log(localStorage.getItem("密码"))
	console.log(localStorage.getItem("邮箱地址"))

</script>
</html>